<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="listQuery.orderons" placeholder="订单编号" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <!-- <el-select v-model="listQuery.status" class="filter-item" placeholder="Please select">
                <el-option v-for=" item  in  statusOptions " :key="item.key" :label="item.display_name"
                    :value="item.key" />
            </el-select> -->
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                查询
            </el-button>
            <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="handleDownload">
                导出数据
            </el-button> -->
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="0">
                <span slot="label">待联系 {{ tjinfo.count1 }}</span>
            </el-tab-pane>
            <el-tab-pane name="1">
                <span slot="label">待上门/送货 {{ tjinfo.count3 }}</span>
            </el-tab-pane>
            <el-tab-pane name="2">
                <span slot="label">正在上门/送货 {{ tjinfo.count3 }}</span>
            </el-tab-pane>
            <el-tab-pane name="3">
                <span slot="label">项目取消 {{ tjinfo.count4 }}</span>
            </el-tab-pane>
            <el-tab-pane name="4">
                <span slot="label">项目完成 {{ tjinfo.count5 }}</span>
            </el-tab-pane>
        </el-tabs>
        <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row
            style="width: 100%;" @sort-change="sortChange">
            <el-table-column label="ID" align="center" width="80">
                <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.orderons }}</span>
                </template>
            </el-table-column>
            <el-table-column label="联系人" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.address }}</span>
                </template>
            </el-table-column>
            <el-table-column label="分类" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.cname }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户名称" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.sname }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="图片" align="center">
                <template slot-scope="{row}">
                    <el-image style="width: 100px; height: 100px" :src="row.imageList[0]"
                        :preview-src-list="row.imageList">
                    </el-image>
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="申请时间" width="140px" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.times | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
            </el-table-column>
           -->
           <el-table-column label="下单时间" width="140px" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.times | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" class-name="status-col" width="100">
                <template slot-scope="{row}">
                    <span>{{ row.dqsex }}</span>
                    <el-tag :type="row.status | statusFilter">
                        {{ row.status == 0 ? '待联系' : row.status == 1 ? '已联系' : row.status == 2 ? '待送货' : row.status ==
                3 ? '已取消': row.status ==
               4 ? '确认完成' : '异常'   }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
                <template slot-scope="{row,$index}">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">
                        查看
                    </el-button>
                    <el-button type="primary" v-if="row.status == 0" size="mini" @click="getupdateArticle(row,1)">
                        已联系
                    </el-button>
                    <el-button type="primary" v-if="row.status == 1" size="mini" @click="getupdateArticle(row,2)">
                        已送货
                    </el-button>
                    <el-button type="primary" v-if="row.status == 2" size="mini" @click="getupdateArticle(row,3)">
                        取消任务
                    </el-button>
                    <el-button type="primary" v-if="row.status == 2" size="mini" @click="getupdateArticle(row,4)">
                        完成任务
                    </el-button>
                    <!-- <el-button type="primary" size="mini" @click="ztUpdate(row)">
                        状态线
                    </el-button>
                    <el-button type="primary" v-if="row.status == 1" size="mini" @click="handleUpdatesf(row)">
                        设置师傅
                    </el-button>
                    <el-button type="primary" v-if="row.status == 2" size="mini" @click="handleUpdatexg(row)">
                        修改师傅
                    </el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="90px">
                <el-form-item label="用户" prop="uid">
                    <el-select v-model="temp.uid" filterable placeholder="请选择">
                        <el-option v-for=" item  in  uList " :key="item.id" :label="item.nickname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="uid">
                    <el-select v-model="temp.cid" filterable placeholder="请选择">
                        <el-option v-for=" item  in  cList " :key="item.id" :label="item.nickname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片" prop="title">
                    <el-image v-for="( item, index ) in  temp.imageList " :key="index"
                        style="width: 100px; height: 100px" :src="item" fit="fit"></el-image>
                </el-form-item>
                <el-form-item label="联系人" prop="title">
                    <el-input v-model="temp.username" />
                </el-form-item>
                <el-form-item label="手机号" prop="title">
                    <el-input v-model="temp.phone" />
                </el-form-item>
                <el-form-item label="地址" prop="content">
                    <el-input v-model="temp.address" />
                </el-form-item>
                <el-form-item label="备注" prop="content">
                    <el-input type="textarea" :rows="5" v-model="temp.bz" />
                </el-form-item>
                <!-- <el-form-item label="状态">
                    <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
                        <el-option v-for=" item  in  statusOptions " :key="item.key" :label="item.display_name"
                            :value="item.key" />
                    </el-select>
                </el-form-item> -->
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
                    {{ textMap[dialogStatus] }}
                </el-button>
            </div> -->
        </el-dialog>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="updateszVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="90px">
                <el-form-item label="师傅" prop="sid">
                    <el-select v-model="temp.sid" filterable placeholder="请选择">
                        <el-option v-for=" item  in  cList " :key="item.id" :label="item.nickname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="dialogStatus === 'updatexg' ? updateDataxg() : updateDatasf()">
                    {{ textMap[dialogStatus] }}
                </el-button>
            </div>
        </el-dialog>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="lcVisible">
            <div style="overflow: auto;height: 400px;">
                <!-- <el-timeline>
                    <el-timeline-item v-for="(activity, index) in  temp.sh " :key="index" :type="activity.type"
                        color="#0bbd87" size="large">
                        <div>{{ activity.msstatus }}</div>
                        <div>备注：{{ activity.bz }}</div>
                        <div>审核：{{ activity.shstatus == null ? '待审核' : activity.shstatus == 1 ? '通过' : '拒绝' }}</div>
                        <div>时间：{{ activity.times | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
                    </el-timeline-item>
                </el-timeline> -->
                <el-timeline>
                    <el-timeline-item v-for="(activity, index) in  temp.sh " :key="index" placement="top">
                        <el-card>
                            <h4>{{ activity.msstatus }}</h4>
                            <p>备注：{{ activity.bz }}</p>
                            <p>审核：{{ activity.shstatus == null ? '待审核' : activity.shstatus == 1 ? '通过' : '拒绝' }}</p>
                            <p>时间：{{ activity.times | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</p>
                            <p v-if="activity.status == 1">
                                <el-image v-for="( item, index ) in  temp.imageList" :key="index"
                                    style="width: 100px; height: 100px" :src="item" fit="fit"
                                    :preview-src-list="temp.imageList"></el-image>
                            </p>
                            <p v-if="activity.status == 3">
                                <el-image v-for="( item, index ) in  temp.wqimageList " :key="index"
                                    style="width: 100px; height: 100px" :src="item" fit="fit"
                                    :preview-src-list="temp.wqimageList"></el-image>
                            </p>
                            <p v-if="activity.status == 7">
                                <el-image v-for="( item, index ) in  temp.wqimageList " :key="index"
                                    style="width: 100px; height: 100px" :src="item" fit="fit"
                                    :preview-src-list="temp.wqimageList"></el-image>
                            </p>
                            <p v-if="activity.status == 3">信息：{{ temp.wcbz }}</p>
                            <p v-if="activity.status == 4">信息：{{ temp.ycbz }}</p>
                            <p v-if="activity.status == 5">信息：{{ temp.ecycbz }}</p>
                            <p v-if="activity.status == 6">信息：{{ temp.qxrwbz }}</p>
                            <p v-if="activity.status == 7">信息：{{ temp.wcbz }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    fetchList, getUserList, createArticle, updateArticle, getDel, updateArticlesf, updatexgsf, getTjList
    , getListAll,getEditstatus
} from '@/api/orders'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Tinymce from '@/components/Tinymce'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination


const statusOptions = [
    { key: '', display_name: '请选择' },
    { key: 1, display_name: '待处理' },
    { key: 2, display_name: '设置师傅' },
    { key: 3, display_name: '完成任务' },
    { key: 4, display_name: '延迟' },
    { key: 5, display_name: '二次延迟' },
    { key: 6, display_name: '取消任务' },
    { key: 7, display_name: '任务结束' },
]
export default {
    name: 'ComplexTable',
    components: { Pagination, Tinymce },
    directives: { waves },
    filters: {
        statusFilter(status) {
            const statusMap = {
                1: 'success',
                2: 'info',
                3: 'danger'
            }
            return statusMap[status]
        },
        typeFilter(type) {
            return calendarTypeKeyValue[type]
        }
    },
    data() {
        return {
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            activeName: 0,
            listQuery: {
                page: 1,
                limit: 20,
                status: 0,
                orderons: '',
            },
            importanceOptions: [1, 2, 3],
            statusOptions,
            showReviewer: false,
            temp: {
                id: undefined,
                uid: '',
                username: '',
                phone:'',
                address:'',
                image: '',
                bz:'',
                imageList: [],
                status: 1,
                cid:'',
                orderons:'',
                status:0
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑',
                create: '新增',
                updatesz: '设置师傅',
                updatexg: '修改师傅',
                lc: '状态线'
            },
            updateszVisible: false,
            dialogPvVisible: false,
            lcVisible: false,
            uList: [],
            cList: [],
            pvData: [],
            listAll: [],
            ztList: [],
            rules: {},
            tjinfo: '',
            downloadLoading: false
        }
    },
    created() {
        this.getList()
        // this.getUserLists()
        this.getUsersList()
        // this.getTjLists()
        // this.getListAlls()
    },
    methods: {
        getupdateArticle(e,status){
            let data = {
                id:e.id,
                status:status
            }
            getEditstatus(data).then(response => {
                if (response.code == 200) {
                    this.getList()
                    this.$notify({
                        title: 'Success',
                        message: 'Created Successfully',
                        type: 'success',
                        duration: 2000
                    })
                } else {
                    this.$notify({
                        title: 'Success',
                        message: 'add none',
                        type: 'error',
                        duration: 2000
                    })
                }
            })
        },
        getTjLists() {
            getTjList(this.listQuery).then(response => {
                this.tjinfo = response.data
            })
        },
        handleClick(tab, event) {
            console.log(tab.index);
            let index = tab.index
            this.listQuery.status = index
            this.getList()
            // this.getTjLists()
            // this.getListAlls()
        },
        getList() {
            this.listLoading = true
            fetchList(this.listQuery).then(response => {
                console.log(response.data)
                this.list = response.data.list
                this.total = response.data.count
                setTimeout(() => {
                    this.listLoading = false
                }, 1 * 1000)
            })
        },
        getListAlls() {
            getListAll(this.listQuery).then(response => {
                this.listAll = response.data.list
            })
        },
        getUsersList() {
            getUserList().then(response => {
                this.uList = response.data
            })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
            // this.getTjLists()
            // this.getListAlls()
        },
        handleModifyStatus(row, status) {
            this.$message({
                message: '操作Success',
                type: 'success'
            })
            row.status = status
        },
        sortChange(data) {
            const { prop, order } = data
            if (prop === 'id') {
                this.sortByID(order)
            }
        },
        sortByID(order) {
            if (order === 'ascending') {
                this.listQuery.sort = '+id'
            } else {
                this.listQuery.sort = '-id'
            }
            this.handleFilter()
        },
        resetTemp() {
            this.temp = {
                id: undefined,
                uid: '',
                username: '',
                phone:'',
                address:'',
                image: '',
                bz:'',
                imageList: [],
                status: 1,
                cid:'',
                orderons:''
            }
        },
        handleCreate() {
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    createArticle(this.temp).then(response => {
                        if (response.code == 200) {
                            this.getList()
                            this.dialogFormVisible = false
                            this.$notify({
                                title: 'Success',
                                message: 'Created Successfully',
                                type: 'success',
                                duration: 2000
                            })
                        } else {
                            this.$notify({
                                title: 'Success',
                                message: 'add none',
                                type: 'error',
                                duration: 2000
                            })
                        }
                    })
                }
            })
        },
        //状态线
        ztUpdate(row) {
            this.temp = Object.assign({}, row) // copy obj
            this.dialogStatus = 'lc'
            this.lcVisible = true
        },
        //设置师傅
        handleUpdatesf(row,status) {
            this.temp = Object.assign({}, row) // copy obj
            this.dialogStatus = 'updatesz'
            this.updateszVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        //修改师傅
        handleUpdatexg(row) {
            this.temp = Object.assign({}, row) // copy obj
            this.dialogStatus = 'updatexg'
            this.updateszVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        updateDataxg() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const tempData = Object.assign({}, this.temp)
                    updatexgsf(tempData).then(() => {
                        this.updateszVisible = false
                        this.$notify({
                            title: 'Success',
                            message: 'Update Successfully',
                            type: 'success',
                            duration: 2000
                        })
                        this.getList();
                    })
                }
            })
        },
        updateDatasf() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const tempData = Object.assign({}, this.temp)
                    updateArticlesf(tempData).then(() => {
                        this.updateszVisible = false
                        this.$notify({
                            title: 'Success',
                            message: 'Update Successfully',
                            type: 'success',
                            duration: 2000
                        })
                        this.getList();
                    })
                }
            })
        },
        handleUpdate(row) {
            this.temp = Object.assign({}, row) // copy obj
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const tempData = Object.assign({}, this.temp)
                    // tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
                    updateArticle(tempData).then(() => {
                        // const index = this.list.findIndex(v => v.id === this.temp.id)
                        // this.list.splice(index, 1, this.temp)
                        this.dialogFormVisible = false
                        this.$notify({
                            title: 'Success',
                            message: 'Update Successfully',
                            type: 'success',
                            duration: 2000
                        })
                        this.getList();
                    })
                }
            })
        },
        handleDelete(row, index) {
            let that = this
            this.$confirm('此操作将永久该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.Getdel(row.id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        Getdel(id) {
            let mup = {
                id: id
            }
            getDel(mup).then(response => {
                if (response.code == 200) {
                    this.$notify({
                        title: 'Success',
                        message: 'Update Successfully',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList()
                } else {
                    this.$notify({
                        title: 'Success',
                        message: 'del none',
                        type: 'error',
                        duration: 2000
                    })
                }

            })
        },
        handleDownload() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
                const tHeader = ['编号', '任务标题', '任务描述', '发起单位', '师傅', '申请时间', '完成时间', '状态']
                const filterVal = ['id', 'title', 'content', 'username', 'sname', 'times', 'wctimes', 'dqsex']
                const data = this.formatJson(filterVal)
                excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: 'table-list'
                })
                this.downloadLoading = false
            })
        },
        formatJson(filterVal) {
            // return this.listAll.map(v => filterVal.map(j => {
            //     return v[j]
            // }))
            return this.listAll.map(v => filterVal.map(j => {
                if (j === 'wctimes' || j === 'times') {
                    return parseTime(v[j])
                } else {
                    return v[j]
                }
            }))
        },
        getSortClass: function (key) {
            const sort = this.listQuery.sort
            return sort === `+${key}` ? 'ascending' : 'descending'
        }
    }
}
</script>
